import React, { Component } from 'react'
import { base, toast, getMultiLang } from 'nc-lightapp-front';
import presetVar from './presetVar';
import { tplHandle, setPointTreeData, getAuditData } from './handle';
const { NCTextArea, NCCheckbox, NCDiv, NCRefreshBtn } = base;
import AuditProblemItemRef from '../../../../../sscbd/refer/sscbase/AuditProblemItemRef';
import classnames from 'classnames'
import './index.less';
import requestApi from './requestApi';

const RejectArea = 'RejectArea';
const PointArea = 'PointArea';
const ProblemArea = 'ProblemArea';
class AuditPointBar extends Component {
    constructor(props) {
        super();
        this.tplHandle = tplHandle;
        this.setPointTreeData = setPointTreeData;
        this.getAuditData = getAuditData;
        this.sysScrollBarWidth = 0; //树状表，默认没有滚动条，滚动条宽度为0
        this.autoPointTree = [];
        this.state = {
            manualPointStatus: {
                /* '': {
                    isPass: false
                } */
            },
            disabledLeftEvent: false,
            expandArea: null, //当前展开的区域可以 reject、 point、problem
            hideRightBar: true,
            hideIframe: true, //用来解决同时出现两个风车的问题
            comMultiLang: [], //组件的多语
            rectify_desc: '' //单据整改内容描述。  我的稽核节点要用
        }
    }


    queryTreeData = async (pk_sscunit) => {

        //let result = await requestApi.treeQuery({ pk_sscunit});
        //let newTree = this.props.syncTree.createTreeData(tempData.data.points.sgtree.nodes);
        //this.props.syncTree.setSyncTreeData(presetVar.manaulTree, newTree);
    }

    componentDidMount() {
        getMultiLang({
            moduleId: 1056, domainName: 'sscrp', currentLocale: 'zh-CN', callback: (comMultiLang) => {
                this.setState({
                    comMultiLang
                })
            }
        })

        this.rightBarDom = document.getElementById('__audit_point_bar');
        this.rejectDom = document.getElementById('__audit_point_bar_right_reject');
        this.pointTreeDom = document.getElementById('__audit_point_bar_right_point_tree');
        this.problemDom = document.getElementById('__audit_point_bar_right_problem');
        this.sgPointTreeDom = document.getElementById('__audit_point_bar_sg_tree');
        this.sgAndZdTreeDom = document.getElementById('__sj_and_zd_tree_wrap')
    }

    //水平拖动
    hdMouseDown = (e) => {
        let barDom = document.getElementById('__audit_point_bar')
        let rightDom = document.getElementById('__audit_point_bar_right');
        let rightDomWidth = parseInt(window.getComputedStyle(rightDom, null).width);
        //let rightDomMinWidth = parseInt(window.getComputedStyle(rightDom,null).minWidth);

        let originalX = e.pageX;
        this.setState({
            disabledLeftEvent: true
        })
        barDom.onmousemove = (e) => {
            let curPageX = e.pageX;
            let offsetX = curPageX - originalX;
            let newWidth = rightDomWidth - offsetX;
            /* if (newWidth < rightDomMinWidth) {
                newWidth = rightDomMinWidth;
            } */
            rightDom.style.width = newWidth + 'px';

        }
        barDom.onmouseup = () => {
            this.setState({
                disabledLeftEvent: false
            })
            barDom.onmousemove = null;
            barDom.onmouseup = null;

            this.adjustAllCheckWrapRightPadding();
        }
    }

    //拒绝结果和树之间的上下拖动
    firstVDMouseDown = (e) => {
        //存在展开的区域，则不能拖动。
        /* if (this.state.expandArea) {
            return;
        } */
        let barDom = this.rightBarDom;
        let rejectDom = document.getElementById('__audit_point_bar_right_reject');
        let pointTreeDom = document.getElementById('__audit_point_bar_right_point_tree');
        let problemDom = document.getElementById('__audit_point_bar_right_problem');

        let domHeight = parseInt(window.getComputedStyle(rejectDom, null).height);

        pointTreeDom.style.flex = 1;
        pointTreeDom.style.height = '';

        let problemDomHeight = parseInt(window.getComputedStyle(problemDom, null).height);
        problemDom.style.height = problemDomHeight + 'px';


        let originalY = e.pageY;

        barDom.onmousemove = (e) => {
            let curPageY = e.pageY;
            let offsetY = curPageY - originalY;
            let newHeight = domHeight + offsetY;

            rejectDom.style.height = newHeight + 'px';

        }
        barDom.onmouseup = () => {
            barDom.onmousemove = null;
            barDom.onmouseup = null;
        }
    }

    //审核要点和审核问题区域间的垂直拖动
    vdMouseDown = (e) => {

        let barDom = this.rightBarDom;
        let pointTreeDom = document.getElementById('__audit_point_bar_right_point_tree');
        let problemDom = document.getElementById('__audit_point_bar_right_problem');

        barDom.style.userSelect = 'none';

        let domHeight = parseInt(window.getComputedStyle(pointTreeDom, null).height);

        //下面两行用于处理审核要点展开状态下时，拖拽抖动的问题。
        pointTreeDom.style.height = domHeight + 'px';
        pointTreeDom.style.flex = 'none';

        problemDom.style.flex = 1;
        problemDom.style.height = '';

        let originalY = e.pageY;

        //用户控制拖拽边界
        let topSideHeight = 46;
        let downSideHeight = parseInt(window.getComputedStyle(barDom, null).height) - topSideHeight;

        barDom.onmousemove = (e) => {

            let curPageY = e.pageY;
            let offsetY = curPageY - originalY;
            let newHeight = domHeight + offsetY;

            //拖拽边界控制
            if (offsetY < 0) {
                if (newHeight < topSideHeight) {
                    newHeight = topSideHeight;
                }
                pointTreeDom.style.height = newHeight + 'px';
            } else if (offsetY > 0) {
                if (newHeight > downSideHeight) {
                    newHeight = downSideHeight;
                }
                pointTreeDom.style.height = newHeight + 'px';
            }
        }
        barDom.onmouseup = () => {
            barDom.onmousemove = null;
            barDom.onmouseup = null;

            barDom.style.userSelect = 'auto';

            this.adjustAllCheckWrapRightPadding();
        }
    }

    //树间垂直拖动
    amongTreeVDMouseDown = (e) => {
        let barDom = this.rightBarDom;
        let pointTreeDom = document.getElementById('__audit_point_bar_sg_tree');
        let parentDom = pointTreeDom.parentNode;
        let domHeight = parseInt(window.getComputedStyle(pointTreeDom, null).height);
        let originalY = e.pageY;

        barDom.style.userSelect = 'none';
        //用户控制拖拽边界
        let topSideHeight = 35;
        let downSideHeight = parseInt(window.getComputedStyle(this.sgAndZdTreeDom, null).height) - topSideHeight;

        barDom.onmousemove = (e) => {

            let curPageY = e.pageY;
            let offsetY = curPageY - originalY;

            let newHeight = domHeight + offsetY;

            //拖拽边界控制
            if (offsetY < 0) {
                if (newHeight < topSideHeight) {
                    newHeight = topSideHeight;
                }
                pointTreeDom.style.height = newHeight + 'px';
            } else if (offsetY > 0) {
                if (newHeight > downSideHeight) {
                    newHeight = downSideHeight;
                }
                pointTreeDom.style.height = newHeight + 'px';
            }

        }
        barDom.onmouseup = () => {
            barDom.onmousemove = null;
            barDom.onmouseup = null;
            barDom.style.userSelect = 'auto';
            //问题清单和审核要点间拖动时，维持比例。
            let pointTreeDomHeight = pointTreeDom.style.height;
            if (pointTreeDomHeight.indexOf('%') < 0) {
                pointTreeDom.style.height = parseInt(pointTreeDomHeight) / parseInt(window.getComputedStyle(parentDom, null).height) * 100 + '%';
            }
            this.adjustAllCheckWrapRightPadding();
        }
    }

    //区域展开
    areaExpand = (key) => {
        this.setState({
            expandArea: key
        })
        switch (key) {
            case RejectArea: //驳回区域暂时去掉了
                this.rejectDom.style.flex = 1;
                this.rejectDom.style.height = '';
                this.pointTreeDom.style.height = '46px';
                this.pointTreeDom.style.flex = 'none';
                this.problemDom.style.height = '46px';
                this.problemDom.style.flex = 'none';
                break;
            case PointArea:
                this.pointTreeDom.style.flex = 1;
                this.pointTreeDom.style.height = '';
                this.rejectDom.style.height = '46px';
                this.rejectDom.style.flex = 'none';
                this.problemDom.style.height = '46px';
                this.problemDom.style.flex = 'none';
                break;
            case ProblemArea:
                this.problemDom.style.flex = 1;
                this.problemDom.style.height = '';
                this.rejectDom.style.height = '56px';
                this.rejectDom.style.flex = 'none';
                this.pointTreeDom.style.height = 46 + 10 + 'px'; //要算上拖拽条的高度
                this.pointTreeDom.style.flex = 'none';
                break;
        }
    }

    //区域收起
    areaCollapse = (key) => {
        this.setState({
            expandArea: key == PointArea ? ProblemArea : PointArea
        })
        switch (key) {
            case PointArea:
                this.pointTreeDom.style.height = 46 + 10 + 'px'; //要算上拖拽条的高度
                this.pointTreeDom.style.flex = 'none';
                this.problemDom.style.flex = 1;
                break;
            case ProblemArea:
                this.problemDom.style.height = '46px';
                this.problemDom.style.flex = 'none';
                this.pointTreeDom.style.flex = 1;
                break;
        }
    }

    /* calcuRrightDistance = () => {
        let headDom = document.querySelector('.sg-tree-all-check-wrap');
        let targetScrollAreaDom = this.sgPointTreeDom.querySelector('.u-table-body-inner');
        if (targetScrollAreaDom) {
            let scrollBarWidth = targetScrollAreaDom.offsetWidth - targetScrollAreaDom.clientWidth;
            if (scrollBarWidth != this.sysScrollBarWidth) {
                let right = parseInt(window.getComputedStyle(headDom, null).right);
                if (scrollBarWidth > 0) {
                    headDom.style.right = (right + scrollBarWidth) + 'px';
                } else if(scrollBarWidth == 0) {
                    headDom.style.right = (right - this.sysScrollBarWidth) + 'px';
                }
                this.sysScrollBarWidth = scrollBarWidth;
            }
        }
    } */

    //单据稽核，我的作业，侧边栏的数据jsx化处理
    commonProblemDataHandle = () => {
        let problemListJsx = [];
        let problemList = this.state.problemList;
        let index = 0;
        for (let key in problemList) {
            index++;
            let item = problemList[key];

            problemListJsx.push((

                <li className="problem-li">
                    <NCDiv fieldid="problem" areaCode={NCDiv.config.ListItem}>

                        <div className="problem-content-wrap nc-theme-common-font-c">
                            <span fieldid='problem-name'>{index + '.' + item.displayname}</span>
                            <span fieldid='problem-serious-lv' className={classnames('pro-level', `pro-${item.serious_level_code}`)}>{item.serious_level_name}</span>
                            {
                                this.props.isEdit && item.execute_mode != 1
                                    ?
                                    <div className="del-btn" onClick={() => {
                                        delete problemList[key];
                                        this.setState({ problemList })
                                    }}>{this.state.comMultiLang['1056SideBar-009']}</div> /* 1056SideBar-009 删除 */
                                    :
                                    null
                            }

                        </div>
                        <div fieldid='problem-desc' className="problem-desc nc-theme-common-font-c">
                            <span>{this.state.comMultiLang['1056SideBar-015']}</span> {/* 问题备注 */}
                            {
                                this.props.isEdit && item.execute_mode != 1 ?
                                    <NCTextArea
                                        fieldid="problem-comment"
                                        placeholder={this.state.comMultiLang['1056SideBar-001']}
                                        showMax={true}
                                        max={200}
                                        rows={1}
                                        value={item.memo || ''}
                                        onChange={(val) => {
                                            item.memo = val;
                                            this.setState({
                                                problemList
                                            })
                                        }}
                                    />
                                    :
                                    item.memo || ''
                            }

                        </div>

                        {/* 整改状态 */}
                        <div fieldid='problem-rectify-desc' className='problem-rectify-desc nc-theme-common-font-c' style={{ display: this.props.isShowRectify ? 'block' : 'none' }}>
                            <span>{this.state.comMultiLang['1056SideBar-013']}：</span> {/* 1056SideBar-013 整改说明 */}
                            {
                                this.props.rectifyIsEdit && item.execute_mode != 1 ?
                                    <NCTextArea
                                        fieldid="problem-rectify-desc"
                                        placeholder={this.state.comMultiLang['1056SideBar-013']}
                                        showMax={true}
                                        max={200}
                                        rows={1}
                                        value={item.problem_desc || ''}
                                        onChange={(val) => {
                                            item.problem_desc = val;
                                            this.setState({
                                                problemList
                                            })
                                        }}
                                    />
                                    :
                                    item.problem_desc || ''
                            }
                        </div>

                    </NCDiv>
                </li>
            ))
        }

        let resultJSX = [
            <ul className="problem-list nc-theme-area-split-bc">
                {problemListJsx}
            </ul>
        ];

        if (this.props.isShowRectify) {
            let bottomRectifyJSX = (
                <div fieldid='bottom-rectify-desc' className="bill-rectify">
                    <span>{this.state.comMultiLang['1056SideBar-014']}：</span> {/* 1056SideBar-014 单据整改说明 */}
                    {
                        this.props.rectifyIsEdit ?
                            <NCTextArea
                                fieldid="rectify-comment"
                                placeholder={this.state.comMultiLang['1056SideBar-014']}
                                showMax={true}
                                max={200}
                                rows={1}
                                value={this.state.rectify_desc || ''}
                                onChange={(val) => {
                                    this.setState({
                                        rectify_desc: val
                                    })
                                }}
                            />
                            :
                            this.state.rectify_desc
                    }
                </div>
            )
            resultJSX.push(bottomRectifyJSX);
        }

        return resultJSX;
    }

    //报表联查单据 问题数据 JSX化处理
    linkQueryProblemDataHandle = () => {
        let resultJsx = [];
        let problemList = this.state.problemList;
        for (let key in problemList) {
            let problemGroup = problemList[key];
            let groupItems = problemGroup.problems.map((item, index) => {
                index++;
                return (
                    <li className="problem-li">
                        <div className="problem-content-wrap nc-theme-common-font-c">
                            <span fieldid='problem-name'>{index + '.' + item.displayname}</span>
                            <span fieldid='problem-serious-lv' className={classnames('pro-level', `pro-${item.serious_level_code}`)}>{item.serious_level_name}</span>
                        </div>
                        <div fieldid='problem-desc' className="problem-desc nc-theme-common-font-c">
                            {
                                item.memo || ''
                            }
                        </div>
                    </li>
                )
            });
            if (groupItems && groupItems.length) {
                resultJsx.push(
                    <NCDiv fieldid="problem" areaCode={NCDiv.config.ListItem}>
                        <div fieldid='problem-type' className="link-query-pro-title-wrap">{problemGroup.title}：</div>
                        <ul className="problem-list link-query-pro-list">
                            {groupItems}
                        </ul>
                    </NCDiv>

                )
            }


        }
        return resultJsx;
    }

    //重置数据 如单据稽核，从编辑态点击取消按钮时触发
    resetData = () => {
        this.setPointTreeData(null, null, this.originData);
    }

    //更新原始数据，当业务节点执行审核数据保存操作时，需要更新原始数据，保证在页面无刷新时，再编辑再取消时调用resetData时数据准确
    updateOriginData = () => {
        let currData = this.getAuditData();
        this.originData.data.problems = currData.problems;
        let originPoints = this.originData.data.points.sgtree.nodes;
        currData.points.forEach((outItem) => {
            originPoints.find((inItem) => {
                if (inItem.refpk == outItem.pk_points) {
                    inItem.ispass = outItem.ispass;
                }
            })
        })
    }

    //调整手工树状表全选复选框右边距
    adjustAllCheckWrapRightPadding = () => {
        setTimeout(() => {
            let headDom = document.querySelector('.sg-tree-all-check-wrap');
            let targetScrollAreaDom = this.sgPointTreeDom.querySelector('.u-table-body-inner');
            //滚动条宽度 大于0 为有滚动条，且值即为滚动条宽度
            let scrollBarWidth = targetScrollAreaDom.offsetWidth - targetScrollAreaDom.clientWidth;
            if (scrollBarWidth != this.sysScrollBarWidth) { //存在滚动条时，全选容器的right样式应该为滚动条的宽度，这样才能与表体选择框位置对齐
                let right = parseInt(window.getComputedStyle(headDom, null).right);
                if (scrollBarWidth > 0) {
                    headDom.style.right = (right + scrollBarWidth) + 'px';
                } else {
                    headDom.style.right = (right - this.sysScrollBarWidth) + 'px';
                }
                this.sysScrollBarWidth = scrollBarWidth;

            }

        }, 100)
    }
    render() {
        const { treeTableCol } = this.props.treeTableManyCol;


        //处理全通过、全不通过
        let manualPointStatus = this.state.manualPointStatus;
        let fullChecked = true;
        let hasUnFullChecked = false;
        let mayHalf = false;
        let haveNull = false;
        let haveN = false;
        for (let pKey in manualPointStatus) {
            let pObj = manualPointStatus[pKey];
            if (pObj.pid == '') {
                if (!hasUnFullChecked) { //只要存在一个非全选时，就不进行赋值了
                    hasUnFullChecked = !pObj.fullChecked;
                }
                mayHalf = mayHalf || pObj.mayHalf;
                haveNull = haveNull || pObj.haveNull;
                haveN = haveN || pObj.haveN;
            }
        }
        //第二个或判断：manualPointStatus为空时，默认也不能是全选状态
        if (hasUnFullChecked || Object.keys(manualPointStatus).length == 0) {
            fullChecked = false;
        }

        let leftParams = {};
        let rightParams = {};
        if (fullChecked) { //全通过
            leftParams.checked = true;
            rightParams.checked = false;
            leftParams.indeterminate = null;
            rightParams.indeterminate = null;
        } else { //不通过 或 半选
            if (mayHalf) { //半选
                leftParams.checked = null;
                leftParams.indeterminate = true;
                rightParams.checked = null;
                if (haveN) {
                    rightParams.indeterminate = true;
                } else {
                    rightParams.indeterminate = false;
                }
            } else { //不通过
                leftParams.checked = false;
                leftParams.indeterminate = null;
                rightParams.indeterminate = null;
                rightParams.checked = null;
                if (haveN) {
                    if (haveNull) {
                        rightParams.indeterminate = true;
                    } else {
                        rightParams.checked = true;
                    }
                }
            }
        }

        return (
            <div className="auditPointBar" id="__audit_point_bar">


                <div
                    className={classnames('left nc-theme-area-bgc', { 'left-disabled-event': this.state.disabledLeftEvent, 'hide-iframe': this.state.hideIframe })} >
                    {this.props.children}
                </div>
                <div
                    id="__audit_point_bar_right"
                    className={classnames('right nc-theme-area-split-bc', { 'right-non-select': this.state.disabledLeftEvent, 'hide-right-bar': this.state.hideRightBar })}
                >
                    <div className='horizontal-drag' onMouseDown={this.hdMouseDown}></div>
                    {/* 驳回结果， 这里功能先不用了。后续确定后再删除这部分代码 */}
                    <div className={classnames('reject-result-wrap', { 'show-reject-area': this.props.showRejectArea })} id="__audit_point_bar_right_reject">
                        <div className="reject-title">
                            <i className="ssc_audit_bar_iconfont iconwentiqingdan problem-title-icon"></i>
                            <span className='title-text'>{this.state.comMultiLang['1056SideBar-002']}</span> {/* 1056SideBar-002 驳回结果 */}
                            <i
                                className={classnames("ssc_audit_bar_iconfont", { "iconxiangshangjiantou": this.state.expandArea == RejectArea, "iconxiangxiajiantou": this.state.expandArea != RejectArea })}
                                onClick={() => {
                                    if (this.state.expandArea == RejectArea) {
                                        this.areaCollapse(RejectArea);
                                    } else {
                                        this.areaExpand(RejectArea)
                                    }
                                }}
                            ></i>
                        </div>
                        <div
                            className={classnames('first-vertical-drag')}
                            onMouseDown={this.firstVDMouseDown}
                        ></div>
                    </div>
                    {/* 审核要点树 */}
                    <div className={classnames('point-wrap', { 'hide-point-area': this.props.hidePointArea })} id="__audit_point_bar_right_point_tree">
                        <div className='point-content'>
                            <div className="point-title nc-theme-common-header-bgc"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    if (this.state.expandArea == PointArea) {
                                        this.areaCollapse(PointArea);
                                    } else {
                                        this.areaExpand(PointArea)
                                    }
                                }}
                            >
                                <i className="ssc_audit_bar_iconfont iconshenheyaodian point-title-icon"></i>
                                <span className="title-text nc-theme-title-font-c">{this.state.comMultiLang['1056SideBar-003']}</span> {/* 1056SideBar-003 审核要点 */}
                                <i
                                    className={classnames("nc-theme-title-font-c ssc_audit_bar_iconfont", this.state.expandArea == PointArea ? "iconxiangshangjiantou" : "iconxiangxiajiantou")}
                                /* style={{ cursor: (this.state.expandArea && this.state.expandArea != PointArea) ? 'not-allowed' : 'pointer' }} */
                                ></i>

                                {
                                    this.props.isEdit && !this.props.disabledRefresh
                                        ?

                                        <NCRefreshBtn
                                            className={'audit-refresh-button '}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                this.setPointTreeData(this.baseReqParam, 'true');
                                            }}></NCRefreshBtn>
                                        :
                                        null
                                }
                            </div>
                            <div className="sj_and_zd_tree_wrap nc-theme-area-bgc" id='__sj_and_zd_tree_wrap'>
                                {/* 手工要点树 */}
                                <div className='tree-wrap sg-tree-wrap' id='__audit_point_bar_sg_tree'
                                    style={{ height: this.props.disabledAutoPointTree ? '100%' : '50%' }}
                                >
                                    <div className='sg-tree-all-check-wrap'>
                                        {
                                            this.props.isEdit
                                                ?
                                                ([
                                                    <div>
                                                        <NCCheckbox
                                                            className="all-pass-checkbox"
                                                            onChange={(isChecked) => {
                                                                this.checkboxOnchange(false, 'ALL', isChecked ? 'Y' : 'null');
                                                            }}
                                                            {...leftParams}
                                                        >
                                                            {this.state.comMultiLang['1056SideBar-004']} {/* 1056SideBar-004 通过 */}
                                                        </NCCheckbox>
                                                    </div>,
                                                    <div>

                                                        <NCCheckbox
                                                            className="all-unpass-checkbox"
                                                            onChange={(isChecked) => {
                                                                this.checkboxOnchange(false, 'ALL', isChecked ? 'N' : 'null');
                                                            }}
                                                            {...rightParams}
                                                        >
                                                            {this.state.comMultiLang['1056SideBar-005']} {/* 1056SideBar-005 不通过 */}
                                                        </NCCheckbox>
                                                    </div>
                                                ])
                                                :
                                                (null)
                                        }

                                    </div>
                                    {treeTableCol(presetVar.manualPointTree, {
                                        addBlankCol: false,
                                        async: false,    //数据同步加载为false,异步加载为true
                                        adaptionHeight: true, //表格高度是否自适应，默认true
                                    })}
                                </div>
                                {/* 自动要点树 */}
                                {
                                    this.props.disabledAutoPointTree ?
                                        null
                                        :
                                        <div className='tree-wrap zd-tree-wrap'>
                                            <div className='among-tree-drag' onMouseDown={this.amongTreeVDMouseDown}></div>{/* 树间的拖拽 */}
                                            {treeTableCol(presetVar.autoPointTree, {
                                                addBlankCol: false,
                                                async: false,    //数据同步加载为false,异步加载为true
                                                adaptionHeight: true //表格高度是否自适应，默认true
                                            })}
                                        </div>
                                }
                            </div>
                        </div>
                        <div className={classnames('vertical-drag nc-theme-zrow-bgc')}
                            onMouseDown={this.vdMouseDown}
                        >
                        </div>


                    </div>
                    <div className="problem-wrap" id="__audit_point_bar_right_problem">
                        <div className="problem-title nc-theme-common-header-bgc"
                            onClick={() => {
                                if (this.props.scene == 'LinkQuery') {
                                    return;
                                }
                                if (this.state.expandArea == ProblemArea) {
                                    this.areaCollapse(ProblemArea);
                                } else {
                                    this.areaExpand(ProblemArea)
                                }
                            }}
                        >
                            <i className="ssc_audit_bar_iconfont iconwentiqingdan problem-title-icon"></i>
                            <span className='title-text nc-theme-title-font-c'>{this.state.comMultiLang['1056SideBar-007']}</span> {/* 1056SideBar-007 问题清单 */}
                            <i
                                className={
                                    classnames(
                                        "ssc_audit_bar_iconfont nc-theme-title-font-c",
                                        this.state.expandArea == ProblemArea ? "iconxiangshangjiantou" : "iconxiangxiajiantou",
                                        { 'default-cursor': this.props.hidePointArea }
                                    )}
                            ></i>

                            {
                                this.props.isEdit ?
                                    <div className="add-problem-btn">
                                        {AuditProblemItemRef({
                                            fieldid: "SSCUnitGridRef",
                                            /* defaultUnitValue: {
                                                refname: '用友网络科技股份有限公司', refpk: "1001A9100000000002OA"
                                            }, */
                                            value: this.state.problemRefVal,//参照不设置value，参照弹窗搜索框会填充上次选择的值,下面给个空值适配此问题
                                            isShowUnit: false,
                                            onChange: async (val) => {
                                                this.setState({ //参照不设置value，参照弹窗搜索框会填充上次选择的值,下面给个空值适配此问题
                                                    problemRefVal: ''
                                                })
                                                let problemList = this.state.problemList;

                                                if (problemList[val.refpk]) {
                                                    toast({ title: this.state.comMultiLang['1056SideBar-008'], duration: 5, color: 'warning', }) /* 1056SideBar-008 已存在相同问题 */
                                                    return false;
                                                }
                                                let result = await requestApi.problemQueryByProblemPk({
                                                    pk_problem: val.refpk
                                                })
                                                let problem = result.data.problem;
                                                problem.repeatCount = 0;
                                                problemList[problem.id] = problem;
                                                this.setState({
                                                    problemList
                                                })
                                            },
                                            queryCondition: () => {
                                                return { 'pk_sscunit': this._sscunitPK }
                                            },
                                            clickContainer: <div onClick={(e) => { e.stopPropagation() }}><div className="add-problem-wrap"><i class="iconfont icon-zengjia"></i>{this.state.comMultiLang['1056SideBar-012']}</div></div> /*问题 */
                                        })}
                                    </div>
                                    :
                                    null
                            }
                        </div>
                        <NCDiv
                            fieldid="problem"
                            areaCode={NCDiv.config.List}
                            className="problem-list-wrap nc-theme-l-area-bgc">
                            {
                                this.props.scene != 'LinkQuery' ?
                                    this.commonProblemDataHandle()
                                    :
                                    this.linkQueryProblemDataHandle()
                            }
                        </NCDiv>
                    </div>
                </div>
            </div>
        )

    }
}

export default AuditPointBar;